<template>
	<svg :class="svgClass" aria-hidden="true" :width="size" :height="size" viewBox="0 0 512 512">
		<use :xlink:href="iconName" />
	</svg>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
export default defineComponent({
	name: "SvgIcon",
	props: {
		name: {
			type: String,
			required: true,
		},
		className: {
			type: String,
			default: "",
		},
		size: {
			type: Number,
			default: 18,
		},
	},
	setup(props) {
		const iconName = computed(() => `#icon-${props.name}`);

		const svgClass = computed(() => {
			return props.className ? "svg-icon " + props.className : "svg-icon";
		});

		return {
			iconName,
			svgClass,
		};
	},
});
</script>

<style lang="scss">
/* 自定义默认图标样式 */
.svg-icon {
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
	cursor: pointer;
}
</style>
